<template>
  <div class="view-container" id="userList">
    <!--<header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>用户列表</span>
        </div>
        <div class="header-form">
          <div class="header-form-item">
            <el-button plain type="danger" icon="el-icon-delete" :loading="delLoading" @click="delOne" :disabled="multipleSelected.length > 1">删除</el-button>
          </div>
          <div class="header-form-item">
            <el-button plain type="primary" icon="el-icon-edit" @click="openEditDialog(true)">编辑</el-button>
          </div>
          &lt;!&ndash;按标题查询&ndash;&gt;
          <div class="header-form-item">
            <el-button plain type="success" icon="el-icon-plus" @click="openEditDialog(false)">添加</el-button>
          </div>
          <div class="header-form-item">
            <el-button plain icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>
          <div class="header-form-item title-search">
            <el-input clearable v-model.trim="user.userNickname" @input="AntiShake" placeholder="用户昵称" tabindex="2"/>
          </div>
          <div class="header-form-item title-search">
            <el-input clearable v-model.trim="user.userName" @input="AntiShake" placeholder="用户名" tabindex="1"/>
          </div>
        </div>
      </div>
    </header>-->

    <list-header
      :title="'用户列表'"
      :delText="'删除'"
      :delLoading="delLoading"
      @del="delOne"
      @open-edit-dialog="openEditDialog($event)"
      @fetch-data="fetchData"
    >
      <div class="header-form-item title-search" slot="search-item-1">
        <el-input clearable v-model.trim="user.userNickname" @input="AntiShake" placeholder="姓名" tabindex="2"/>
      </div>
      <div class="header-form-item title-search" slot="search-item-2">
        <el-input clearable v-model.trim="user.userName" @input="AntiShake" placeholder="用户名" tabindex="1"/>
      </div>
    </list-header>


    <section class="table-container">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column label="用户头像" width="80">
          <template slot-scope="s">
            <div class="img-wrap">
              <img :src="s.row.photoPath" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户名" align="center" />
        <el-table-column prop="userNickname" label="姓名" align="center" />
        <el-table-column prop="sexText" label="性别" align="center" width="80"/>
        <el-table-column prop="departmentName" label="部门" align="center"/>
        <el-table-column prop="positionName" label="职位" align="center"/>
        <el-table-column prop="roleName" label="用户组" align="center"/>
        <el-table-column prop="created"  label="创建时间" :formatter="createdFmt" align="center"/>
        <el-table-column prop="lastLogin"  label="最后登录" :formatter="lastLoginFmt" align="center"/>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="s">
            <el-link @click="editPhoto(s.row.userId)">修改头像</el-link>
          </template>
        </el-table-column>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>
    <user-common ref="save-page" @update="update"></user-common>
    <photo-edit-dialog ref="photo-edit-dialog" @update="fetchData"></photo-edit-dialog>
  </div>
</template>

<script>
  import userAPI from '@/api/system/user'
  import userCommon from './common/userCommon'
  import PhotoEditDialog from './common/PhotoEditDialog'
  import listMixin from '@/mixin/listMixin'
  import ListHeader from '@/common/ListHeader'
  export default {
    name: 'UserList',
    components: { userCommon ,PhotoEditDialog,ListHeader},
    mixins: [listMixin],
    data() {
      return {
        user: {
          userId: '',
          userName: '',
          userNickname: '',
          password: '',
/*          mobilePhone: '',
          email: ''*/
        },
        mixinParams: {
          propertyName: 'userId',
          API: userAPI,
        },
        imageUrl: '',
        // tableLoading:true
      }
    },
    created() {
    },
    methods: {

      editPhoto(id){
        this.$refs['photo-edit-dialog'].open(id)
      },
      update(flag) {
        if (!flag) {
          if (this.tableData && this.tableData.length === this.page.size) {
            this.page.index++
          }
        }
        this.fetchData()
      },
      fetchData() {
        userAPI.getList(this.user.userName, this.user.userNickname, this.page).then(res => {
          console.log('用户管理',res.records)
          this.tableData = res.records
          this.page.total = res.total
        }).catch(err => {
          console.log(err)
        })
      },
      searchForm() {
        this.fetchData()
      },
      resetForm(form) {
        this.$refs[form].resetFields()
        this.fetchData()
      },
/*      openEditDialog(){
        for(let val of this.tableData){
          if(val.userId === this.multipleSelected[0]){
            const obj = JSON.parse(JSON.stringify(val))
            this.$refs['child'].open(obj)
            break
          }
        }

      },
      openAddDialog() {
        this.$refs['child'].open(null)
      },*/
      createdFmt(row){
        return this._util.format(row.created)
      },
      lastLoginFmt(row){
        return this._util.format(row.lastLogin)
      },
/*      sexFmt(row){
        return row.sex === 1 ? '女' : '男'
      },
      dateFmt(row){
        return this._util.format(row.created)
      },
      date2Fmt(row){
        return this._util.format(row.lastLogin)
      }*/
      handleAvatarSuccess(res, file) {
        this.imageUrl = res.result.webFilePath
        this.addressBook.photo = res.result.webFilePath
      },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2

        /*        if (!isJPG) {
                  this.$message.error('上传头像图片只能是 JPG 格式!');
                }*/
        if (!isLt2M) {
          this.$message.info('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
      },
    }
  }
</script>

<style lang="scss">

  #userList {
    padding: 0;
    .user-save-dialog {
      .el-dialog {
        width: 35%;
      }
    }
    .photo-edit-dialog {
      .el-dialog {
        width: 30%;
      }
    }


    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      $num: 188px;
      font-size: 28px;
      color: #8c939d;
      width: $num;
      height: $num;
      line-height: $num;
      text-align: center;
    }

    .avatar {
      width: 288px;
      height: 288px;
      display: block;
    }

  }

</style>

<style scoped lang="scss">

  .img-wrap {
    $number : 40px;
    width: $number;
    height: $number;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .view-container {

  }
</style>
